﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

    <head>
    

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>hust_小C的模版引擎</title>
        <script src="../../py/TASK/hust/Template.js" type="text/javascript"></script>
		
      
    </head>

    <body>
   <textarea id="tpl" style="width:600px; height:200px; border:1px solid #f60;">
     <div>hust_小C的模版引擎
<h2>对象遍历</h2>
      {{ for(var i in data.a){ }}
         <li>{{=i}}:{{=data.a[i]}}</li>
      {{  }  }}
<h2>If  else   解析</h2>
	  {{if(data.b==100){}}
	     b的值为:{{=data.b}}
	  {{}else{ }}
	     b的值不满足if条件
	  {{ } }}
<h2>表格解析</h2>
	  <table style="background:red;color:#fff; text-align:center;">
	   <tr><th width="200;">歌曲名</th><th width="200;">歌手</th><th width="200">进入试听</th></tr>
	   {{ for(var i=0,l=data.song.length;i<l;i++){ }}
	   <tr><td>{{=data.song[i].songname}}</td><td>{{=data.song[i].singer}}</td><td><a href="{{=data.song[i].url}}" _mce_href="{{=data.song[i].url}}">{{=data.song[i].url}}</a></td></tr>
	   {{  }  }}
	  </table>
<h2>图像解析</h2>
       {{ for(var i=0,l=data.url.length;i<l;i++){ }}
	         <img src="{{=data.url[i]}}">
       {{  }   }}
   </div>
   </textarea>
   <input type="button" value="解析渲染" id="render">
 
    <div id="ok" style="border:1px solid red; background:#9999FF"></div>
<script>
function runEx(code) {
    if (code != "") {
        var newwin = window.open("", "", "");
        newwin.opener = null;
        newwin.document.write(code);
        newwin.document.close();
    }
}

 Array.prototype.filter=function(fn){
   var temp=[];
   for(var i=0,l=this.length;i<l;i++){
      this[i]&&fn.call(this,i,this[i])&&temp.push(this[i]);
   } 
  return temp;
}
Array.prototype.each=function(fn){
   var temp=[];
   for(var i=0,l=this.length;i<l;i++){
     fn.call(this,i,this[i]);
   } 
   return this;
}



  
document.getElementById('render').onclick=function(){
 runEx(Template({tpl:document.getElementById('tpl'),target:document.getElementById('ok'),data:{a:{
  name:"coolboy",
  age:21,
  test:"good!"
},
b:100,
url:["http://image9.9158.com/39/37/1402184341/971BA9080689FCF08A61948AC224115C.jpg","http://image9.9158.com/43/36/928573648/C6703ED2CCF75829B050D9F0ED8BB274.jpg","http://image9.9158.com/35/43/1792415536/5CB6C5F949CB9DF3E3A30BA871970002.jpg"],
song:[{songname:"千百度 ",singer:"许嵩",url:"http://zhangmenshiting.baidu.com/data/music/4752698/%E5%8D%83%E7%99%BE%E5%BA%A6.mp3?xcode=f08fdfd64a17ddb73c350b4e1ff22833"},{songname:"想象之中",singer:"许嵩",url:"http://zhangmenshiting.baidu.com/data/music/4753398/%E6%83%B3%E8%B1%A1%E4%B9%8B%E4%B8%AD.mp3?xcode=9354de7edd267ba005efbff149ebffea"},
{songname:"半城烟沙",singer:"许嵩",url:"http://zhangmenshiting.baidu.com/data/music/264925/%E5%8D%8A%E5%9F%8E%E7%83%9F%E6%B2%99.mp3?xcode=cf43709031889621fd7bc075c0ef2950"},
{songname:"最熟悉的陌生人",singer:"萧亚轩",url:"http://media.openedu.com.cn/media_file/netcourse/asx/mxyl/public/mxjs/music/4.MP3"}]
}}).render());
}
         
</script>
    </body>
</html>
